<template lang="html">
    <div class="record-manage-details">
        <nav-header>
            <template slot="menuBefore">
            <li>
                <router-link to="/affairs/teachers/record-manage">档案管理</router-link>
            </li>
            <li class="gap">&gt;</li>
            </template>
        </nav-header>
        <div class="details-container">
            <div class="details-title">
            档案信息<span class="tips">(如无则填无，多个信息时，用；隔开)</span>
            </div>
            <el-form ref="form" :model="formDefined" label-width="100px">
            <el-form-item label="账号" prop="account" :required="true" :rules="[{ required: true, message: '请选择账号', trigger: 'blur' }]">
                <el-select
                v-model="formDefined.account"
                filterable
                remote
                placeholder="请输入账号"
                :remote-method="remoteMethod"
                @change="accountSel"
                :loading="loading">
                <el-option
                    v-for="item in accountList"
                    :key="item.number"
                    :label="item.name"
                    :value="item.number">
                </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入有效值', trigger: 'blur' }]">
                <el-input v-model="formDefined.name" placeholder="根据输入账号自动获取" readonly></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex" :rules="[{ required: true, message: '请输入有效值', trigger: 'blur' }]">
                <el-input v-model="formDefined.sex" placeholder="根据输入账号自动获取" readonly></el-input>
            </el-form-item>
            <el-form-item label="地区" prop="area">
                <el-input v-model="formDefined.area" placeholder="根据输入账号自动获取" readonly></el-input>
            </el-form-item>
            <el-form-item label="学校" prop="school">
                <el-input v-model="formDefined.school" placeholder="根据输入账号自动获取" readonly></el-input>
            </el-form-item>
            </el-form>
            <el-form ref="form1" label-width="100px">
            <el-form-item v-for="(field, fieldInx) in fields" :key="field.id" :label="field.name">
                <el-input v-model="field.content" :placeholder="'请输入' + field.name"></el-input>
            </el-form-item>
            </el-form>
            <div>
            <el-button @click="back">取消</el-button>
            <el-button type="primary" @click="save">确定</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import {debounce} from '@/tools/tool'
    export default {
        name: 'recordManageDetails',
        data() {
            return {
            fields: [],/*获取的字段列表 */
            title: '添加档案',
            formDefined: {
                account: '',
                name: '',
                sex: '',
                area: '',
                school: '',
            },
            form: {
                account: '',
                name: '',
                sex: '',
                area: '',
                school: '',
                birthday: '',
                mask: '',
                subject: '',
                work: '',
                fEducation: '',
                eEducation: '',
                year: '',
                duty: '',
                post: '',
                curSubject: '',
                jobTime: '',
                performance: '',
                award: '',
                assess: '',
                exchange: '',
                punishment: '',
            },
            loading: false,
            user_id: '',
            accountList: [],
            pickerOptionsStart: {
                disabledDate: (time) => {
                return time.getTime() > parseInt(Date.now() - 8.64e7);
                }
            },
            daveParams: []
            }
        },
        mounted() {},
        created() {this.getFields()},
        methods: {
            handleChange(value) {
            },
            back() {
                this.$router.go(-1);
            },
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    const lazyLayout = debounce(() => {
                    this.getAccount(query);
                    }, 800);
                    lazyLayout();
                } else {
                    this.accountList = [];
                }
            },
            getFields() {
                let params = {
                    type: 1,
                }
                const success = res => {
                    res.data.forEach((ele,inx) => {
                    if(inx > 4) {
                        let obj = {};
                        obj[`id`] = ele.id;
                        obj[`name`] = ele.name;
                        obj[`content`] = ele.content;
                        this.fields.push(obj);
                    }
                    })
                }
                this.$ajax.get('api/archive/archive_field', { params: params,func: {success: success}})
            },
            getAccount(account) {
                let params = {
                    number: account,
                    role_id: 6,
                }
                const success = res =>{
                    this.loading = false;
                    this.accountList = res.data;
                }
                this.$ajax.get('api/user/user', { params: params,func: {success: success}})
            },
            accountSel(val) {
                const selAccount = this.accountList.filter(ele => {
                    return Object.is(ele.number,val);
                })
                this.user_id = selAccount[0].id;
                this.formDefined = Object.assign({},this.formDefined, {
                    name: selAccount[0].name,
                    sex: selAccount[0].sex_name,
                    area: selAccount[0].position_name ? selAccount[0].position_name : '',
                    school: selAccount[0].school_name ? selAccount[0].school_name : '',
                })
            },
            save() {
                this.$refs.form.validate(valid => {
                    if(valid) {
                    let arr = [];
                    let defineParams =  Object.values(this.formDefined);
                    for(let i=0,len=defineParams.length;i<len;i++) {
                        arr.push({archive_id: i+1,content: defineParams[i]});
                    }
                    this.fields.forEach(ele => {
                        arr.push({archive_id: ele.id,content: ele.content ? ele.content : ' '});
                    })
                    let params = {
                        userid: this.user_id,
                        arr: arr,
                    };
                    const success = res => {
                        this.$message.success(res.msg);
                        this.back();
                    }
                    this.$ajax.post('api/archive/people_archive',params,{func:{success:success}})
                    } else {
                    return;
                    }
                })
            },
        },
    }
</script>

<style lang="scss">
    .record-manage-details {
        .details-container {
            padding-left: 38px;
            .details-title {
            height: 75px;
            line-height: 75px;
            .tips {
                color: #ddd;
            }
            }
            // .el-form:nth-of-type(1) {
            //   .el-form-item__label {
            //     position: relative;
            //     &::after {
            //       display: inline-block;
            //       content: '*';
            //       vertical-align: middle;
            //       color: red;
            //     }
            //   }
            // }
            .el-form {
            width: 720px;
            .el-form-item__label {
                text-align: left;
            }
            .el-cascader {
                display: block;
            }
            .el-input {
                display: block;
                width: 100%;
            }
            }
        }
    }
</style>
